<!-- 代码已包含 CSS：使用 TailwindCSS , 安装 TailwindCSS 后方可看到布局样式效果 -->
<template>
  <div class="flex flex-wrap justify-center gap-8 px-2 mt-1">
    <div v-for="adviser in advisers" :key="adviser.id" class="relative">
      <div class="adviser-card flex flex-col items-center">
        <div class="relative group">
          <img :src="$config.staticDomainURL + '/' + adviser.headimgurl"
            class="w-8 h-8 rounded-full object-cover cursor-pointer shadow-md hover:shadow-lg transition-shadow duration-300 m-auto"
          />
          <h3 class="mt-2 text-gray-600 font-medium items-center text-center">
            {{ adviser.skrName }}
          </h3>
          <div class="adviser adviser-popup hidden group-hover:block absolute z-10 top-full left-0 mt-3 w-72 bg-white rounded-lg">
            <!-- 箭头指示器 -->
            <div class="absolute -top-2 left-3 w-4 h-4 z-20 rotate-45 bg-white border-l border-t border-gray-100" ></div>
            <div class="relative p-6 rounded-lg">
              <div class="flex items-center mb-4 border-b border-gray-300">
                <img
                  :src="$config.staticDomainURL + '/' + adviser.headimgurl"
                  :alt="adviser.skrName"
                  class="w-14 h-14 rounded-full object-cover mr-4 ring-2 ring-offset-2 ring-blue-100"
                />
                <div class="flex flex-col">
                  <h3 class="font-semibold text-gray-900 text-lg flex items-center mb-1" >
                    <i class="fas fa-user-tie mr-2 text-green-500"></i>
                    {{ adviser.skrName }}
                  </h3>
                  <h3 class="font-semibold text-gray-900 text-lg flex items-center">
                    <i class="fas fa-phone-alt mr-2 text-green-500"></i>
                    {{ adviser.skrTel }}
                  </h3>
                </div>
              </div>
              <div class="flex justify-center p-4 rounded-lg">
                <img
                  :src="$config.staticDomainURL + '/' + adviser.skrQrcode"
                  alt="WeChat QR Code"
                  class="w-48 h-48 object-cover rounded-lg shadow-md"
                />
              </div>
              <div class="flex space-x-4 mt-4 justify-center">
                <i class="fab fa-weixin text-sm"></i>
                <i class="fab fa-linkedin text-sm"></i>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "adviserCards",
  props: {
    advisers: {
      type: Array,
      default: () => []
    },
  },
  data() {
    return {
      // advisers: [
      //   {
      //     id: 1,
      //     name: "林雨晨",
      //     title: "高级顾问",
      //     avatar:
      //       "https://ai-public.mastergo.com/ai/img_res/a8f2eec40710ee1f1c0bbc1ac8d8904f.jpg",
      //     phone: "138-8888-7777",
      //     qrcode:
      //       "https://mastergo.com/ai/api/search-image?query=modern minimalist QR code design with professional business style, clean layout, high contrast for easy scanning, simple light background&width=400&height=400&orientation=squarish",
      //     socials: [
      //       { type: "wechat", icon: "fab fa-weixin", link: "#" },
      //       { type: "linkedin", icon: "fab fa-linkedin", link: "#" },
      //     ],
      //   },
      //   {
      //     id: 2,
      //     name: "张明远",
      //     title: "高级顾问",
      //     avatar:
      //       "https://ai-public.mastergo.com/ai/img_res/61ef9f3db0c8ddca25e55a6c820c5dba.jpg",
      //     phone: "139-9999-8888",
      //     qrcode:
      //       "https://mastergo.com/ai/api/search-image?query=modern minimalist QR code design with professional business style, clean layout, high contrast for easy scanning, simple light background&width=400&height=400&orientation=squarish",
      //     socials: [
      //       { type: "wechat", icon: "fab fa-weixin", link: "#" },
      //       { type: "linkedin", icon: "fab fa-linkedin", link: "#" },
      //     ],
      //   },
      //   {
      //     id: 3,
      //     name: "王思琪",
      //     title: "高级顾问",
      //     avatar:
      //       "https://ai-public.mastergo.com/ai/img_res/48d159da61b3937d28fd862ba84e0145.jpg",
      //     phone: "135-5555-6666",
      //     qrcode:
      //       "https://mastergo.com/ai/api/search-image?query=modern minimalist QR code design with professional business style, clean layout, high contrast for easy scanning, simple light background&width=400&height=400&orientation=squarish",
      //     socials: [
      //       { type: "wechat", icon: "fab fa-weixin", link: "#" },
      //       { type: "linkedin", icon: "fab fa-linkedin", link: "#" },
      //     ],
      //   },
      // ],
    };
  },
};
</script>
<style scoped>
.adviser-card .adviser-popup {
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transform: translateY(-10px);
  backdrop-filter: blur(8px);
}
.group:hover .adviser-popup {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  display: block;
}
/* 移除number input的箭头 */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.adviser {
  box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.15);
}
</style>
